<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        .avatar {
            width: 100px;
            height: 100px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">

    <el-button type="primary" @click="dialogVisible=true">上传<i class="el-icon-upload el-icon--right"></i></el-button>

    <!--添加数据对话框表单-->
    <el-dialog
            title="编辑品牌"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :rules="rules" :model="exam" label-width="80px">
            <el-form-item label="题目" prop="title">
                <el-input v-model="exam.title"></el-input>
            </el-form-item>
            <el-form-item label="选项A" prop="optionA">
                <el-input v-model="exam.optionA"></el-input>
            </el-form-item>
            <el-form-item label="选项B" prop="optionB">
                <el-input v-model="exam.optionB"></el-input>
            </el-form-item>
            <el-form-item label="选项C" prop="optionC">
                <el-input v-model="exam.optionC"></el-input>
            </el-form-item>
            <el-form-item label="选项D" prop="optionD">
                <el-input v-model="exam.optionD"></el-input>
            </el-form-item>
            <el-form-item label="答案" prop="answer">
                <el-input v-model="exam.answer"></el-input>
            </el-form-item>
            <el-form-item label="科目类型" prop="types">
                <el-select   v-model="exam.types" placeholder="请选择科目类型">
                    <el-option label="计算机网络" value="1"></el-option>
                    <el-option label="操作系统" value="2"></el-option>
                    <el-option label="计算机组成原理" value="3"></el-option>
                    <el-option label="数据结构" value="4"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="附加图片" prop="image" v-model="exam.image">
                <el-upload
                        class="avatar-uploader"
                        action="/common/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="addQue">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/element-ui/lib/index.js}"></script>
<link rel="stylesheet" th:href="@{/element-ui/lib/theme-chalk/index.css}">
<script th:src="@{/js/axios.js}"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                //错题本数据
                exam:{
                    id:"",
                    title:"",
                    optionA:"",
                    optionB:"",
                    optionC:"",
                    optionD:"",
                    answer:"",
                    types:"",
                    image:""
                },
                imageUrl: '',
                fileList:[],
                dialogVisible:false,
                rules:{
                    title:[
                        {required:true,message:"请输入题目",}
                    ]
                }

            };
        },
        methods:{
            addQue(){},
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            handleAvatarSuccess(res) {
                console.log(res)
                this.imageUrl = `/common/download?name=${res}`
            }
        }
    })
</script>
</body>
</html>